<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Welcome - Ace Docs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.css" rel="stylesheet"/>

    <link href="../assets/css/prettify.css" rel="stylesheet">

    <link rel="stylesheet" href="../assets/css/ace-fonts.css"/>
    <link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet"/>
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="../assets/css/ace-skins.css"/>

    <link href="assets/js/themes/sunburst.css" rel="stylesheet"/>

    <style>
        .navbar {
            background: #438EB9 !important;
        }

        body {
            font-size: 14px;
        }

        .skin-3 .main-container:before {
            background: #F6F6F6;
        }

        .page-content {
            padding-top: 25px;
            padding-bottom: 75px;
            max-width: 700px;
            margin: 0 auto;
        }

        .help-content {
            background-color: #FFF;
            max-width: 680px;
            margin: 0 auto;
            padding: 12px 24px;
            border: 1px solid #C5D0DC;
        }

        .help-content > .widget-box > .widget-header > .info-title {
            cursor: pointer;
        }

        .help-content > .widget-box > .widget-header > .info-title:hover {
            background-color: #DCE8F1;
        }

        .help-content > .widget-box.collapsed > .widget-header {
            border-bottom-width: 0;
        }

        .help-content > .widget-box {
            border-bottom: 1px solid #DCE8F1;
            margin-bottom: 10px;
            padding-bottom: 5px;
            transition: none;
        }

        .help-content > .widget-box.collapsed {
            padding-bottom: 10px;
            transition: padding-bottom 0.1s;
        }

        .help-content > .widget-box:last-child {
            border-bottom-width: 0;
            margin-bottom: 0;
        }

        .help-content > .widget-box:only-child {
            padding-bottom: 0;
            padding-bottom: 5px;
        }

        .info-list {
            margin: 0;
        }

        .info-list > li:nth-child(odd) > .ace-icon:first-child {
            color: #478FCA;
        }

        .info-list > li:nth-child(even) > .ace-icon:first-child {
            color: #69AA46;
        }

        .info-list > li:not(.hr) {
            margin-top: 0;
            margin-bottom: 0;
            padding: 16px 12px;
            line-height: 22px;
        }

        .info-list > li:not(.hr):nth-child(even) {
            background-color: #FFF;
            border: 1px solid #E9E9E9;
        }

        .info-list > li:not(.hr):nth-child(odd) {
            background-color: #F0F4F9;
        }

        .info-list > li:not(.hr):nth-child(even) code {
            background-color: #F0F4F9;
        }

        .info-list > li:not(.hr):nth-child(odd) code {
            background-color: #FFF;
        }

        .help-more {
            color: #4E82A3;
            border-bottom: 1px dotted #8BA8BA;
            padding: 0 1px 1px;
        }

        .help-more:hover {
            text-decoration: none;
            border-bottom-color: #628DB2;
            background-color: #E4EAC7;
        }

        u.dotted {
            text-decoration: none;
            border-bottom: 1px dotted #999;
        }

        @media only screen and (min-width: 992px) {
            .sidebar {
                padding-top: 4px;
            }
        }

        pre .close {
            float: inherit;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            opacity: inherit;
            text-shadow: inherit;
        }

        .open-file {
            cursor: pointer;
            -webkit-transition: all 0.12s;
            transition: all 0.12s;
        }

        .open-file:hover {
            background-color: #CEE0EA !important;
        }

        .open-file .brief-show {
            display: none;
        }

        .open-file:hover .brief-show {
            display: inline;
        }

        .code-modal .modal-dialog {
            margin-top: 6px;
            margin-bottom: 6px;
        }

        .code-modal .modal-header {
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .code-modal .modal-body {
            padding: 10px 12px
        }

        pre {
            border-width: 0;
            box-shadow: none;
            border-radius: 0;
            margin-top: 8px;
        }

        a[href^="http"]:before {
            font-family: FontAwesome;
            font-size: 15px;
            content: "\f08e";
            display: inline;
            margin-right: 3px;
        }

        a.external_link[href^="http"]:before {
            display: none;
        }

        .thumbnail {
            margin: 12px 0 8px;
        }
    </style>
</head>

<body class="no-skin skin-3">
<div id="navbar" class="navbar navbar-default navbar-fixed-top h-navbar">
    <div class="navbar-container container" id="navbar-container">
        <div class="navbar-header pull-left ace-navbar-brand">
				<span class="no-skin">
				 <button data-target="#sidebar" type="button" class="navbar-toggle menu-toggler pull-left"
                         id="menu-toggler">
                     <span class="sr-only">Toggle sidebar</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
				</span>
            <a href="#" class="navbar-brand">
                <small>
                    &nbsp;<i class="glyphicon glyphicon-book"></i>&nbsp;
                    Help <span class="smaller-75">(v1.3.2)</span>
                </small>
            </a><!-- /.brand -->
        </div>

        <div class="navbar-header pull-right ace-navbar-buttons">
            <ul class="nav ace-nav">
                <li class="margin-2 no-border">
                    <a href="#" id="help-move-prev"><i class="ace-icon fa fa-chevron-left"></i></a>
                </li>
                <li class="margin-2 no-border">
                    <a href="#" id="help-move-next"><i class="ace-icon fa fa-chevron-right"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="main-container container">
    <script>
        if (document.location.protocol == 'file:') {
            document.write('<div class="alert alert-danger">\
			<strong>Please open this page using <span class="text-info">`http` protocol</span>, i.e. access it like this <span class="text-primary">http://127.0.0.1/path/to/ace/docs/index.html</span></strong><br />\
			Demo pages, documentation & CSS/JS builder pages, load data dynamically using ajax and <b>`file` protocol</b> prevents that due to browser restrictions.\<br />\
			Also some browsers such as Firefox don\'t load fonts when resource files are inside an upper level directory.\
			</div>');
        }
    </script>
    <div class="sidebar responsive sidebar-fixed" id="sidebar">
        <ul class="nav nav-list">
            <li class="highlight">
                <a href="#intro">
                    <span class="menu-icon">&#x2170;.</span>
                    <span class="menu-text">Introduction</span>
                </a>
                <b class="arrow"></b>
            </li>

            <li class="highlight hover">
                <a href="#changes" class="dropdown-toggle">
                    <span class="menu-icon">&#x2171;.</span>
                    <span class="menu-text">Changes & Updates</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#changes.v7"><i class="menu-icon fa fa-caret-right"></i> v1.3.1 <i
                            class="fa fa-long-arrow-right"></i> v1.3.2</a></li>
                    <li class="hover"><a href="#changes.v6"><i class="menu-icon fa fa-caret-right"></i> v1.3.0 <i
                            class="fa fa-long-arrow-right"></i> v1.3.1</a></li>
                    <li class="hover"><a href="#changes.v5"><i class="menu-icon fa fa-caret-right"></i> v1.2.0 <i
                            class="fa fa-long-arrow-right"></i> v1.3.0</a></li>
                    <li class="hover"><a href="#changes.v4"><i class="menu-icon fa fa-caret-right"></i> v1.1.3 <i
                            class="fa fa-long-arrow-right"></i> v1.2.0</a></li>
                    <li class="hover"><a href="#changes.v3"><i class="menu-icon fa fa-caret-right"></i> v1.1.2 <i
                            class="fa fa-long-arrow-right"></i> v1.1.3</a></li>
                    <li class="hover"><a href="#changes.v2"><i class="menu-icon fa fa-caret-right"></i> v1.1.0 <i
                            class="fa fa-long-arrow-right"></i> v1.1.2</a></li>
                    <li class="hover"><a href="#changes.fontawesome"><i class="menu-icon fa fa-caret-right"></i>
                        Fontawesome & Icons</a></li>
                </ul>
                <b class="arrow"></b>
            </li>

            <li class="highlight hover">
                <a href="#" class="dropdown-toggle">
                    <span class="menu-icon">&#x2172;.</span>
                    <span class="menu-text">Files</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#files/html"><i class="menu-icon fa fa-caret-right"></i> HTML Files</a>
                    </li>
                    <li class="hover"><a href="#files/mustache"><i class="menu-icon fa fa-caret-right"></i> Mustache
                        Files</a></li>
                    <li class="hover"><a href="#files/css"><i class="menu-icon fa fa-caret-right"></i> CSS/LESS
                        Files</a></li>
                    <li class="hover"><a href="#files/javascript"><i class="menu-icon fa fa-caret-right"></i> Javascript
                        Files</a></li>
                    <li class="hover"><a href="#files/examples"><i class="menu-icon fa fa-caret-right"></i> Example
                        Files</a></li>
                </ul>
            </li>

            <li class="highlight hover">
                <a href="#" class="dropdown-toggle">
                    <span class="menu-icon">&#x2173;.</span>
                    <span class="menu-text">Basics</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#basics/layout"><i class="menu-icon fa fa-caret-right"></i> Page
                        Layout</a></li>
                    <li class="hover"><a href="#basics/navbar"><i class="menu-icon fa fa-caret-right"></i> Navbar</a>
                    </li>
                    <li class="hover"><a href="#basics/sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar</a>
                    </li>
                    <li class="hover"><a href="#basics/content"><i class="menu-icon fa fa-caret-right"></i> Content</a>
                    </li>
                    <li class="hover"><a href="#basics/ajax"><i class="menu-icon fa fa-caret-right"></i> Ajax
                        Content</a></li>
                    <li class="hover"><a href="#basics/footer"><i class="menu-icon fa fa-caret-right"></i> Footer</a>
                    </li>
                </ul>
            </li>

            <li class="highlight hover">
                <a href="#elements" class="dropdown-toggle">
                    <span class="menu-icon">&#x2174;.</span>
                    <span class="menu-text">Elements</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#elements.button"><i class="menu-icon fa fa-caret-right"></i> Buttons</a>
                    </li>
                    <li class="hover"><a href="#elements.label-badge"><i class="menu-icon fa fa-caret-right"></i> Labels
                        & Badges</a></li>
                    <li class="hover"><a href="#elements.icon"><i class="menu-icon fa fa-caret-right"></i> Icons</a>
                    </li>
                    <li class="hover"><a href="#elements.form"><i class="menu-icon fa fa-caret-right"></i> Form Control</a>
                    </li>
                    <li class="hover"><a href="#elements.tab"><i class="menu-icon fa fa-caret-right"></i> Tabs</a></li>
                    <li class="hover"><a href="#elements.accordion"><i class="menu-icon fa fa-caret-right"></i>
                        Accordion</a></li>
                    <li class="hover"><a href="#elements.tooltip"><i class="menu-icon fa fa-caret-right"></i> Tooltip &
                        Popover</a></li>
                    <li class="hover"><a href="#elements.dropdown"><i class="menu-icon fa fa-caret-right"></i> Dropdown</a>
                    </li>
                    <li class="hover"><a href="#elements.other"><i class="menu-icon fa fa-caret-right"></i> Other</a>
                    </li>
                </ul>
            </li>

            <li class="highlight hover">
                <a href="#" class="dropdown-toggle">
                    <span class="menu-icon">&#x2175;.</span>
                    <span class="menu-text">Custom Elements</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#custom/widget-box"><i class="menu-icon fa fa-caret-right"></i> Widget
                        Boxes</a></li>
                    <li class="hover"><a href="#custom/scrollbar"><i class="menu-icon fa fa-caret-right"></i> Scrollbars</a>
                    </li>
                    <li class="hover"><a href="#custom/file-input"><i class="menu-icon fa fa-caret-right"></i> File
                        Input</a></li>
                    <li class="hover"><a href="#custom/checkbox"><i class="menu-icon fa fa-caret-right"></i> Checkbox &
                        Switches</a></li>
                    <li class="hover"><a href="#custom/colorpicker"><i class="menu-icon fa fa-caret-right"></i> Simple
                        Color Picker</a></li>
                    <li class="hover"><a href="#custom/inline-editable"><i class="menu-icon fa fa-caret-right"></i>
                        Inline Editable Addons</a></li>
                    <li class="hover"><a href="#custom/content-slider"><i class="menu-icon fa fa-caret-right"></i>
                        Content Slider</a></li>
                    <li class="hover"><a href="#custom/onpage-help"><i class="menu-icon fa fa-caret-right"></i> Onpage
                        Help</a></li>
                    <li class="hover"><a href="#custom/extra"><i class="menu-icon fa fa-caret-right"></i> Extra Classes</a>
                    </li>
                </ul>
            </li>

            <li class="highlight hover">
                <a href="#" class="dropdown-toggle">
                    <span class="menu-icon">&#x2176;.</span>
                    <span class="menu-text">Pages</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#pages/dashboard"><i class="menu-icon fa fa-caret-right"></i>
                        Dashboard</a></li>
                    <li class="hover"><a href="#pages/gallery"><i class="menu-icon fa fa-caret-right"></i> Gallery</a>
                    </li>
                    <li class="hover"><a href="#pages/pricing"><i class="menu-icon fa fa-caret-right"></i> Pricing</a>
                    </li>
                    <li class="hover"><a href="#pages/invoice"><i class="menu-icon fa fa-caret-right"></i> Invoice</a>
                    </li>
                    <li class="hover"><a href="#pages/faq"><i class="menu-icon fa fa-caret-right"></i> FAQ</a></li>
                    <li class="hover"><a href="#pages/inbox"><i class="menu-icon fa fa-caret-right"></i> Inbox</a></li>
                    <li class="hover"><a href="#pages/email"><i class="menu-icon fa fa-caret-right"></i> Email Templates</a>
                    </li>
                    <li class="hover"><a href="#pages/profile"><i class="menu-icon fa fa-caret-right"></i> Profile</a>
                    </li>
                    <li class="hover"><a href="#pages/timeline"><i class="menu-icon fa fa-caret-right"></i> Timeline</a>
                    </li>
                    <li class="hover"><a href="#pages/login"><i class="menu-icon fa fa-caret-right"></i> Login</a></li>
                    <li class="hover"><a href="#pages/error"><i class="menu-icon fa fa-caret-right"></i> Error</a></li>
                </ul>
            </li>

            <li class="highlight hover">
                <a href="#" class="dropdown-toggle">
                    <span class="menu-icon">&#x2177;.</span>
                    <span class="menu-text">Plugins</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>

                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover">
                        <a href="#plugins/tools" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Tools
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/tools.node-js">Node.js</a></li>
                            <li class="hover"><a href="#plugins/tools.less-js">Less.js</a></li>
                            <li class="hover"><a href="#plugins/tools.mustache">Mustache Compilers</a></li>
                            <li class="hover"><a href="#plugins/tools.uglifyjs">UglifyJS</a></li>
                            <li class="hover"><a href="#plugins/tools.yui-compressor">YUI Compressor</a></li>
                        </ul>
                    </li>

                    <li class="hover"><a href="#plugins/bootstrap"><i class="menu-icon fa fa-caret-right"></i> Bootstrap</a>
                    </li>
                    <li class="hover"><a href="#plugins/jquery"><i class="menu-icon fa fa-caret-right"></i> jQuery</a>
                    </li>
                    <li class="hover">
                        <a href="#plugins/date-time" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Date & Time
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/date-time.datepicker">Date picker</a></li>
                            <li class="hover"><a href="#plugins/date-time.daterangepicker">Daterange Picker</a></li>
                            <li class="hover"><a href="#plugins/date-time.timepicker">Time Picker</a></li>
                            <li class="hover"><a href="#plugins/date-time.datetimepicker">Datetime Picker</a></li>
                            <li class="hover"><a href="#plugins/date-time.fullcalendar">FullCalendar</a></li>
                        </ul>
                    </li>

                    <li class="hover">
                        <a href="#plugins/charts" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Charts
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/charts.flot">jQuery Flot Charts</a></li>
                            <li class="hover"><a href="#plugins/charts.sparkline">jQuery Sparklines</a></li>
                            <li class="hover"><a href="#plugins/charts.easypiechart">Easy Pie Chart</a></li>
                            <li class="hover"><a href="#plugins/charts.knob">jQuery Knob</a></li>
                        </ul>
                    </li>

                    <li class="hover">
                        <a href="#plugins/tables" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Table & Grids
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/tables.datatables">jQuery dataTables</a></li>
                            <li class="hover"><a href="#plugins/tables.jqgrid">jQuery jqGrid</a></li>
                        </ul>
                    </li>

                    <li class="hover">
                        <a href="#plugins/input" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Input & Controls
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/input.chosen">Chosen</a></li>
                            <li class="hover"><a href="#plugins/input.select2">Select2</a></li>
                            <li class="hover"><a href="#plugins/input.tag-input">Tag Input</a></li>
                            <li class="hover"><a href="#plugins/input.duallist">Dual listbox</a></li>
                            <li class="hover"><a href="#plugins/input.multiselect">Multiselect</a></li>

                            <li class="hover"><a href="#plugins/input.masked-input">Masked Input</a></li>
                            <li class="hover"><a href="#plugins/input.limiter">Input Limiter</a></li>

                            <li class="hover"><a href="#plugins/input.autosize">Textarea Autosize</a></li>
                        </ul>
                    </li>

                    <li class="hover">
                        <a href="#plugins/editor" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Editors
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/editor.wysiwyg">Wysiwyg Editor</a></li>
                            <li class="hover"><a href="#plugins/editor.markdown">Markdown Editor</a></li>
                        </ul>
                    </li>

                    <li class="hover">
                        <a href="#plugins/fuelux" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> FuelUX
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/fuelux.spinner">Spinner</a></li>
                            <li class="hover"><a href="#plugins/fuelux.wizard">Wizard</a></li>
                            <li class="hover"><a href="#plugins/fuelux.treeview">Treeview</a></li>
                        </ul>
                    </li>


                    <li class="hover">
                        <a href="#plugins/misc" class="dropdown-toggle">
                            <i class="menu-icon fa fa-caret-right"></i> Miscellaneous
                            <b class="arrow fa fa-angle-right"></b>
                        </a>

                        <b class="arrow"></b>
                        <ul class="submenu">
                            <li class="hover"><a href="#plugins/misc.inline-editable">Inline Editable</a></li>
                            <li class="hover"><a href="#plugins/misc.jquery-validate">jQuery Validate</a></li>
                            <li class="hover"><a href="#plugins/misc.colorbox">Colorbox</a></li>
                            <li class="hover"><a href="#plugins/misc.dropzone">Dropzone.js</a></li>
                            <li class="hover"><a href="#plugins/misc.colorpicker">Colorpicker</a></li>

                            <li class="hover"><a href="#plugins/misc.bootbox">Bootbox</a></li>
                            <li class="hover"><a href="#plugins/misc.gritter">Gritter</a></li>
                            <li class="hover"><a href="#plugins/misc.nestable-list">Nestable Lists</a></li>
                            <li class="hover"><a href="#plugins/misc.slimscroll">SlimScroll</a></li>

                            <li class="hover"><a href="#plugins/misc.raty">Star Rating</a></li>
                        </ul>
                    </li>

                </ul>
            </li>


            <li class="highlight hover">
                <a href="#settings" class="dropdown-toggle">
                    <span class="menu-icon">&#x2178;.</span>
                    <span class="menu-text">Settings</span>
                    <b class="arrow fa fa-angle-right"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="hover"><a href="#settings.page"><i class="menu-icon fa fa-caret-right"></i> Page options</a>
                    </li>
                    <li class="hover"><a href="#settings.sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar
                        options</a></li>
                    <li class="hover"><a href="#settings.skins"><i class="menu-icon fa fa-caret-right"></i> Skins</a>
                    </li>
                    <li class="hover"><a href="#settings.rtl"><i class="menu-icon fa fa-caret-right"></i> RTL (right to
                        left)</a></li>
                    <li class="hover"><a href="#settings.storage"><i class="menu-icon fa fa-caret-right"></i> Cookies &
                        Storage</a></li>
                </ul>
            </li>

            <li class="highlight">
                <a href="#credits">
                    <span class="menu-icon">&#x2179;.</span>
                    <span class="menu-text">Credits</span>
                </a>
                <b class="arrow"></b>
            </li>


            <li class="highlight">
                <a href="#issues">
                    <i class="menu-icon fa fa-gavel"></i>
                    <span class="menu-text">Issues</span>
                </a>
                <b class="arrow"></b>
            </li>

        </ul>

        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
               data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>


    <div class="main-content">
        <div class="page-content">


        </div>
        <!-- /.page-content -->
    </div>
    <!-- /.main-content -->


    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a><!-- /.btn-scroll-up -->

</div>
<!-- /.main-container -->


<!--[if !IE]> -->
<script src="../assets/js/jquery.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../assets/js/jquery1x.js"></script>
<![endif]-->

<script src="../assets/js/bootstrap.js"></script>
<script src="../assets/js/prettify.js"></script>

<script src="../assets/js/ace-extra.js"></script>
<script src="../assets/js/ace-elements.js"></script>
<script src="../assets/js/ace.js"></script>


<script>
    $(function () {
        //$('body').scrollspy({ target: '.sidebar' })

        //used for top next/prev buttons
        var section_list = [], section_map = {}, current = 0;
        var sindex = 0;
        $('.sidebar .nav-list a').each(function () {
            var href = getHref($(this).attr('href'));
            if (href) {
                section_list.push(href);
                section_map[href] = sindex++;
            }
        });

        $('#help-move-prev').on('click', function (e) {
            e.preventDefault();
            if (--current >= 0) {
                var href = section_list[current];
                document.location.hash = href;
            }
            if (current < 0) current = 0;
        });
        $('#help-move-next').on('click', function (e) {
            e.preventDefault();
            if (++current < section_list.length) {
                var href = section_list[current];
                document.location.hash = href;
            }
            if (current >= section_list.length) current = section_list.length - 1;
        });


        //$(document).on('show.ace.widget hide.ace.widget', '.help-content > .widget-box', function(e) {
        //disable button action
        //e.preventDefault();
        //});
        $(document).on(ace.click_event, '.help-content > .widget-box > .widget-header > .info-title', function (e) {
            var widget_box = $(this).closest('.widget-box').widget_box('toggle');
            //widget_box.siblings('.widget-box').widget_box('hide');
        });


        $(document).off(ace.click_event + '.ace.submenu', '.sidebar .nav-list');
        $(document).on(ace.click_event + '.ace.submenu', '.sidebar .nav-list a', function (e) {
            var href = getHref($(this).attr('href'));
            if (!href) return false;
        });

        $(window).on('hashchange.help', function (e) {
            var href = getHref(window.location.hash);
            if (!href) return false;
            return gotoUrl(href);
        })
        $(document).on(ace.click_event + '.help', '.help-more', function (ev) {
            //clicking on a link triggers 'hashchange', so it's not needed
            //but if we already are on a hash such as '#hash1'
            //and click a '#hash1' link, 'hashchange' won't be triggered and we won't scroll to our content
            var href = $(this).attr('href');
            if (window.location.hash == href) gotoUrl(href);
        });


        var href = getHref(window.location.hash);
        if (!href) window.location.hash = '#intro';
        else $(window).triggerHandler('hashchange.help');

        var prev_target = null;

        function gotoUrl(href) {
            current = section_map[href];

            var url = href.replace(/\..*$/g, '').replace(/#/gi, '')
            var parts = url.split('/');
            if (parts.length == 1) {
                if (url.length == 0) url = 'intro';
                url = url + '/index.html';
            }
            else if (parts.length > 1) {
                url = url + '.html';
            }

            $('.sidebar .active').removeClass('active');
            var link = $('a[href="' + href + '"]').eq(0);
            link.parents('li').addClass('active');

            var text = $.trim(link.find('.menu-text').text());
            if (text.length == 0) text = $.trim(link.text());
            document.title = text + " - Ace Docs";
            //if(text == '');

            var ret = scrollToTarget(href);
            if (ret === false) {
                $('.page-content').empty().html('<i class="ace-icon fa fa-spinner fa-spin blue fa-2x"></i>');

                //otherwise try downloading the page
                $.ajax({url: 'sections/' + url}).done(function (result) {
                    result = result.replace(/\<pre(?:\s+)data\-language=["'](?:html|javascript|php)["']\>([\S|\s]+?)\<\/pre\>/ig, function (a, b) {
                        return a.replace(b, b.replace(/\</g, '&lt;').replace(/\>/g, '&gt;'));
                    });

                    $('.page-content').addClass('hidden').empty().html(result);
                    formatResult();

                    ret = scrollToTarget(href);
                    if (ret) document.title = ret + " - Ace Docs";
                }).fail(function () {
                    $('.page-content').empty().html('<div class="alert alert-danger"><i class="fa fa-warning"></i> Unable to load page!</div>');
                });
            }
            else if (ret) document.title = ret + " - Ace Docs";


            return true;
        }

        function formatResult() {
            $('.page-content .info-section').each(function () {
                var header = $(this).prevAll('.info-title').eq(0).addClass('widget-title').wrap('<div class="widget-header" />')
                        .parent().append('<div class="widget-toolbar no-border">\
				<a href="#" data-action="collapse">\
					<i data-icon-hide="fa-minus" data-icon-show="fa-plus" class="ace-icon fa fa-plus"></i>\
				</a>\
			</div>').closest('.widget-header');

                $(this).wrap('<div class="widget-box transparent' + (header.length > 0 ? ' collapsed' : '') + '"><div class="widget-body"><div class="widget-main"></div></div></div>');
                $(this).closest('.widget-box').prepend(header);

                $(this).ace_scroll({size: parseInt($(window).height() - 200), reset: true});
                //.parent().css({'max-height':400, 'overflow-y':'scroll'});//
            });

            Rainbow.color();

            $('.page-content').removeClass('hidden');
        }

        function getHref(href) {
            href = href && href.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
            href = $.trim(href);
            if (href.match(/[\#\/]$/i)) return false;
            return href;
        }

        function scrollToTarget(href) {
            target = $('[data-id="' + href + '"]').eq(0);
            if (target.length == 1) {
                target.closest('.widget-box').widget_box('show');

                //if target exists on page scroll to it
                $('html,body').animate({scrollTop: target.offset().top - 75}, 300);
                if (prev_target) prev_target.find('.fa-angle-right').remove();

                if (!target.is('h1')) target.prepend('<i class="fa fa-angle-right red"></i> ');
                prev_target = target;

                return target.text().replace(/^[\d\s\.]+/ig, '');//convert "4. something" to "something"
            }
            return false;//section not found, go back and get it via ajax
        }


        $(document).on(ace.click_event, '.open-file[data-open-file]', function () {
            var url = $(this).text();
            var language = $(this).attr('data-open-file');
            $.ajax({url: '../' + url, dataType: 'text'}).done(function (content) {
                if (language != 'json') {
                    if (language != 'css') {
                        //replace each tab character with two spaces (only those that start at a new line)
                        content = content.replace(/\n[\t]{1,}/g, function (p, q) {
                            return p.replace(/\t/g, "  ");
                        });
                    } else {
                        content = content.replace(/\t/g, "  ")
                    }
                }
                else {
                    content = JSON.stringify(JSON.parse(content), null, 2);
                }
                content = content.replace(/\>/g, '&gt;').replace(/\</g, '&lt;')
                Rainbow.color(content, language, function (highlighted_code) {
                    display_code(url, highlighted_code);

                });
            });
        });

        function display_code(url, highlighted_code) {
            var modal = $(document.body).find('#code-modal');
            if (modal.length == 0) {
                modal = $('<div id="code-modal" class="modal fade code-modal" tabindex="-1" role="dialog" aria-labelledby="CodeDialog" aria-hidden="true">\
				  <div class="modal-dialog modal-lg">\
					<div class="modal-content">\
						<div class="modal-header">\
						  <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>\
						  <i class="fa fa-file-o"></i>\
						  <code class="code-url"></code>\
						</div>\
						<div class="modal-body"><pre class="code-content"></pre></div>\
					</div>\
				  </div>\
				</div>').appendTo('body');
            }

            modal.find('.code-url').html(url);
            modal.find('.code-content').html(highlighted_code);
            modal.modal('show');
        }

        $(document).on('click', 'a[href^="http"]', function (ev) {
            //go to a url, using meta refresh tag, to avoid sending 'referrer' url,
            //maybe because of hiding development server's directory and folders

            ev.preventDefault();
            var url = $(this).attr('href');

            var win = window.open('blank.html');
            win.onload = function () {
                win.document.write('<meta http-equiv="refresh" content="0; url=' + url + '">');
            }
        });
    });
</script>

<script src="assets/js/rainbow.js"></script>
<script src="assets/js/language/generic.js"></script>
<script src="assets/js/language/html.js"></script>
<script src="assets/js/language/javascript.js"></script>
<script src="assets/js/language/css.js"></script>
<script src="assets/js/language/php.js"></script>


</body>
</html>
